<template>
    <div>
      <van-sticky :offset-top="0">
      <div :class='ishow?"sticky":"show"'>
<div class="you">优惠</div>

        <van-tabs v-model="active" @click="onClick" :sticky='sticky'  >
            <van-tab v-for="(item) in headerlist" :title="item.name" :key="item.eliteId">
            </van-tab>
        </van-tabs>
        </div>
        </van-sticky>

            <van-card  :price="data.price/100" :desc="data.commentNum+'个评价' +'   '+ '好评率' +data.goodCommentsShare" :title="data.name" class="goods-card" :thumb="data.image"
             v-for="data in list" :key="data.commentNum"
              @click="changeclick(data.skuId)">
                <template #footer>
                  <van-button size="mini" style="color:red;">马上抢</van-button>

                </template>
            </van-card>
        <!-- <div v-for="data in list" :key="data.commentNum">
            <img :src="data.image" alt="">
            {{data.name}}

        </div> -->

    </div>
</template>
<script>
import http from '@/util/http'
import Vue from 'vue'
import { Tab, Tabs, SwipeCell, Card, Button, Sticky } from 'vant'
import 'vant/lib/index.css'
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(SwipeCell).use(Card).use(Button).use(Sticky)

export default {
  components: {

  },
  data () {
    return {

      active: 0,
      sticky: true,
      id: 24,
      list: [],
      headerlist: [],
      ishow: false,
      container: null
    }
  },
  mounted () {
    this.container = this.$refs.container
    this.getdata() // 实例化数据
    http({
      url: '/heihei/api/union/product/elite/elite_list?c=h5&s=20000&t=1605102655308&v=1.0'
    }).then(res => { this.headerlist = res.data.data.eliteList })
  },
  methods: {

    // scoll (qq) {
    //   if (qq.scrollTop > 50) {
    //     this.ishow = true
    //   } else {
    //     this.ishow = false
    //   }
    //   console.log(qq.scrollTop, this.ishow)
    // },
    getdata () {
      http({
        url: `/heihei/api/union/product/product_list?c=h5&s=20000&t=1605101883633&v=1.0&eliteId=${this.id}&pn=1&ps=20`
      }).then(res => {
        this.list = res.data.data.pageList
      })
    },
    onClick (title, id) {
      this.id = this.headerlist[title].eliteId
      console.log(title, id, this.id)
      this.getdata()
      // this.getdata ()
    },
    changeclick (id) {
      this.$router.push({
        path: '/pages/jd-union/list/detail',
        query: {
          id: id
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.sticky{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  background: white;
}
.you{
      text-align: center;
      height: 50px;
      line-height:50px;
      font-size: 17px;
      border-bottom: 1px solid rgb(245, 245, 245);
      background: white;
    }

    img{
        width: 103px;
        height: 103px;
    }
    .goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }
  .delete-button title{
      font-size: 20px;
  }
</style>
